<template>
    <fieldset>
        <legend>排行榜</legend>
        <ul>
            <li v-for="item in comments" :key="item.id">姓名:{{ item.name }}--评论:{{ item.content }}</li>
        </ul>
    </fieldset>
</template>
<script>
//获取留言板的数据
//接口:http://chst.vip:1902/students/getstulist

//组件加载的时候,发起请求,获取数据,并且展示
export default {
    data() {
        return {
            //存放留言板数据的变量
            comments: []
        }
    },
    mounted() {
        console.log('排行榜的Mounted')

        this.getComments()
    },
    //封装到methods
    methods: {
        //抽离发送请求更新列表的逻辑
        getComments() {
            fetch('http://chst.vip:1902/students/getstulist')
                .then(response => response.json())
                .then(res => {
                    console.log(res)
                    //将服务器获取的留言数据赋值给comments
                    this.comments = res.data
                })
        },
    },
    //keep-alive的钩子
    activated() {
        //组件被激活的时候
        console.log('组件被激活了')
        this.getComments()
    },
    deactivated() {
        //组件被缓存的时候
        console.log('组件被缓存了')
        //可以清楚定时器(可以像destory一样处理一样的逻辑)
    }
}
</script>